<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no,minimum-scale=1.0">
    <title>flex布局初体验</title>
    <style>
        /* flex布局原理：通过给父盒子添加flex属性，让父盒子变成一个弹性盒子，
           然后给子元素设置flex属性，让子元素变成弹性盒子，
           这样就可以实现弹性盒子的布局了。 */
        /* 1.父元素设置display:flex
         2.子元素设置flex:1
         3.flex布局的子元素默认是浮动效果
         4.flex布局的子元素默认是居中效果
         5.flex布局的子元素默认是换行效果
         6.flex布局的子元素默认是自适应宽度
         7.flex布局的子元素默认是自适应高度
         8.flex布局的子元素默认是自适应高度
         当我们为父元素设置了flex布局后，子元素的float 值就失效了
         9.flex布局的子元素默认是居中效果 */
        */ div {
            /* flex布局: 默认是block布局 ,子元素默认是浮动效果 */
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            justify-content: space-around;
        }

        div span {
            /* width: 150px; */
            /* 平均分配 */
            flex: 1;
            height: 100px;
            background-color: skyblue;
            margin-right: 5px;
        }
    </style>
</head>

<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>